<%--
  Created by IntelliJ IDEA.
  User: maliangcheng
  Date: 2020/8/12
  Time: 20:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>head</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/resource/layui/css/layui.css" media="all">
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>

<ul class="layui-nav" id="vue2" v-clock>
    <li class="layui-nav-item">
        <a href="${pageContext.request.contextPath}/employees/main" id="main">首页<span class="layui-badge">{{info.orderCount}}</span></a>
    </li>
    <li class="layui-nav-item">
        <a href="${pageContext.request.contextPath}/goods/getGoods">商品详情<span class="layui-badge">{{info2.goodsCount}}</span></a>
    </li>
    <li class="layui-nav-item">
        <a href="${pageContext.request.contextPath}/order/getOrder">订单详情<span class="layui-badge">{{info.orderCount}}</span></a>
    </li>
    <li class="layui-nav-item">
        <a href="${pageContext.request.contextPath}/employees/self">个人中心<span class="layui-badge-dot"></span></a>
    </li>
    <li class="layui-nav-item" lay-unselect="">
        <a href="${pageContext.request.contextPath}/employees/self"><i class="layui-icon layui-icon-username" style="font-size: 30px;color: #c0c4cc;margin-right: 8px"></i>我</a>
        <dl class="layui-nav-child">
            <dd><a href="${pageContext.request.contextPath}/employees/toUpdateEmployees">修改信息</a></dd>
            <dd><a href="${pageContext.request.contextPath}/employees/logout">退出登录</a></dd>
        </dl>
    </li>
</ul>
<script src="/resource/layui/layui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.js"></script>
<script src="../js/head.js"></script>
<script>
    var vm = new Vue({
        el: "#vue2",
        data(){
            return{
                //json对应main页面元素
                info:{
                    orderCount: null,
                    totalPrice: null,

                },
                info2: {
                    goodsCount: null

                }
            }
        },
        mounted(){
            axios.post('http://localhost:8080/order/Count').then(response=>(this.info = response.data)),
                axios.get('http://localhost:8080/goods/Count').then(response=>(this.info2 = response.data))
        }
    })
</script>
<script>
    layui.use('element', function(){
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

        //监听导航点击
        element.on('nav(demo)', function(elem){
            //console.log(elem)
            layer.msg(elem.text());
        });
    });
</script>
</body>
</html>

